<!-- 结算应付作业(1+2+3+4) 蹇泽阳-->
<template>
  <div class="app-container">
    <!-- 打印 -->
    <div class="printContent2">
      <div style="width: 100%; height: 13.5cm; padding-top: 0.5cm" v-for="(page, pageIndex) in printArr" :key="pageIndex">
        <div class="header size-24" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px">
          <div style="flex: 1; text-align: center">
            <span style="text-align: center; margin-left: 110px">福建{{ factoryName }}鞋业有限公司</span>
          </div>
          <div style="text-align: right; margin-right: 30px">
            <span style="font-size: 14px">第 {{ count }} 次打印</span>
          </div>
        </div>
        <div class="header size-18" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px">
          <div style="flex: 1; text-align: center">
            <span style="text-align: center; margin-left: 155px">（对账单）</span>
          </div>
          <div style="text-align: right; margin-right: 25px">
            <span style="font-size: 14px">第 {{ pageIndex + 1 }} 页&nbsp;(共 {{ totalPages }} 页)</span>
          </div>
        </div>
        <div class="header size-14" style="display: flex; justify-content: space-evenly">
          <span>供货单位：{{ currentTableRow.vendorName }}</span>
          <span>结算日期：{{ currentTableRow.slipDate }}</span>
          <span>结算单号：{{ currentTableRow.slipNo }}</span>
          <span>打印日期：{{ getCurrentTime() }}</span>
        </div>
        <div class="mainTable">
          <table style="text-align: center; font-size: 16px; margin-top: 10px">
            <tr>
              <td class="size-14 center">材料颜色</td>
              <td class="size-14 center">材料名称</td>
              <td class="size-14 center">规格</td>
              <td class="size-14 center">单位</td>
              <td class="size-14 center">数量</td>
              <td class="size-14 center">单价</td>
              <td class="size-14 center">金额</td>
              <td class="size-14 center">备注</td>
            </tr>
            <tr v-for="(item2) in page as any" :key="item2.amt">
              <td class="size-14 center">{{ item2.mtlColor }}</td>
              <td class="size-14 center">{{ item2.mtlName }}</td>
              <td class="size-14 center">{{ item2.mtlSpec }}</td>
              <td class="size-14 center">{{ item2.mtlUnit }}</td>
              <td class="size-14 center">{{ item2.qty }}</td>
              <td class="size-14 center">{{ item2.price }}</td>
              <td class="size-14 center">{{ item2.amt }}</td>
              <td class="size-14 center">{{ item2.remark }}</td>
            </tr>
          </table>
        </div>
        <div v-if="isLastPage(pageIndex, totalPages)">
          <div class="header" style="display: flex; justify-content: space-evenly; margin-top: 10px">
            <span>单据笔数合计：{{ currentTableRow.sum }}</span>
            <span>总金额：{{ currentTableRow.amt }}</span>
            <span>大写金额：{{ transformStr(currentTableRow.amt) }}</span>
          </div>
          <div class="header" style="display: flex; justify-content: space-evenly; margin: 10px 0">
            <span>复审：</span>
            <span>审核：</span>
            <span>制单：{{ tableData2[0] ? tableData2[0].sysUser : '' }}</span>
            <span>供应商：</span>
          </div>
          <div class="mainTable footer size-14">
            备注：此单已入库，仅数量及单价计算，若有违反合同或协议事项，在其货款中扣除。注：存根\白，供应商\红，财务\黄
          </div>
        </div>
      </div>
    </div>
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />
    <Find :searchImg="false" :OriginalFilter="{ static: true }" :formList="formList2" @findClicked="findClicked2" />
    <div class="flex mt10" style="width: 100%; background-color: white">
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
        <div class="flex AIC">
          <h1 class="f16">结算资料</h1>
          <el-date-picker
            class="ml10 mr10"
            v-model="month"
            type="month"
            placeholder="结算月份"
            format="YYYYMM"
            value-format="YYYYMM"
            style="width: 120px"
          />
          <el-select
            allow-create
            default-first-option
            class="mr10"
            style="width: 120px"
            v-model="settlementMethod"
            placeholder="结算方式"
            clearable
            filterable
          >
            <el-option v-for="item in SettlementMethodOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
          <el-select-v2 default-first-option :options="VenderOptions" style="width: 160px" v-model="vender" placeholder="厂商" clearable filterable>
          </el-select-v2>
          <el-button class="primaryBth ml10" type="primary" size="default" @click="settlementBtn">结算</el-button>
          <el-button class="primaryBth" type="primary" size="default" @click="outExcel">导出</el-button>
        </div>
        <Table
          :tableHeader="tableHeader"
          :tableData="tableData"
          selection
          class="mt10"
          :isLoading="isLoading"
          @currentRow="currentRow"
          @selectList="selectTableList"
          :summaryData="summaryData"
          summary
          :outTableHeight="110"
        />
        <el-card shadow="never" :body-style="{ padding: '5px' }">
          <PageModule :PageData="{ total, buttonS: true }" @pageSizeChange="handleSizeChange" @pageChange="handleCurrentChange" />
        </el-card>
      </el-card>

      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
        <h1 class="f16">结算明细</h1>
        <Table
          :showToolTip="false"
          :tableHeader="tableHeader2"
          :tableData="tableData2"
          class="mt10"
          :isLoading="isLoading2"
          @currentRow="currentRow2"
          :TableHeight="50"
          :summaryData="summaryData2"
          summary
        />
        <div class="flex AIC mt10">
          <div class="flex AIC">
            <h1 class="f16">付款记录</h1>
            <JDialog
              :tableHeader="JTableHeader3"
              :width="40"
              @removeOne="removeOne3"
              :currentTableRow="currentTableRow3"
              @confirm="confirm3"
              :unEdit="false"
            />
          </div>
          <el-button class="primaryBth ml10" type="primary" size="default" @click="finalPaymentBtn">尾款处理</el-button>
          <h1 class="f16 ml10 mr10">未付款金额:</h1>
          <el-input v-model="unpaid" placeholder="0" disabled @change="" style="width: 100px"></el-input>
        </div>
        <Table
          summary
          :summaryData="summaryData3"
          :tableHeader="tableHeader3"
          :tableData="tableData3"
          class="mt10"
          :isLoading="isLoading3"
          @currentRow="currentRow3"
          :TableHeight="50"
          :outTableHeight="130"
        />
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'
import LoginWork from '@/utils/LoginWork'
import fileRequest from '@/utils/fileRequest'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'SettlementPayablesKlAll'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import type { formListType } from '@/components/Find/index.vue'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import service from '@/utils/request'
import { debounce } from 'lodash'
import { onMounted, watch } from 'vue'
// 通过sessionStorage获取工厂名称
const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}')
const factoryName = userInfo.abbrName

const month = ref('')
const vender = ref('')
const settlementMethod = ref('')
const VenderOptions = ref([]) as any
const SettlementMethodOptions = ref([]) as any
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '单据号码',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '结算月份',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '厂商',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '指令',
    inputValue: ''
  },
  {
    type: 'date',
    dateLabel: '结算日期',
    dateValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '送货单号',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '材料名称',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '结算方式',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'checkbox',
    checkboxLabel: '未检核',
    checked: true
  },
  {
    type: 'checkbox',
    checkboxLabel: '已检核',
    checked: true
  },
  {
    type: 'checkbox',
    checkboxLabel: '未付',
    checked: true
  },
  {
    type: 'checkbox',
    checkboxLabel: '已付',
    checked: true
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  }
]) as any

const formList2 = ref([
  {
    type: 'button',
    checkboxLabel: '取消结算'
  },
  {
    type: 'button',
    checkboxLabel: '打印'
  },
  {
    type: 'button',
    checkboxLabel: '打勾记录检核'
  },
  {
    type: 'button',
    checkboxLabel: '打勾记录取消检核'
  },
  {
    type: 'button',
    checkboxLabel: '导出'
  },
  {
    type: 'button',
    checkboxLabel: '导出汇总'
  }
])
const findClicked = async (content: string) => {
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
}
const findClicked2 = async (content: string) => {
  if (content === '置空') {
    formList2.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
  if (content === '打勾记录检核') {
    const res = (await LoginWork.put(
      `/mtlCosts/allApAmt/cfm?cfmFlag=Y`,
      selectedLists.value.map((item: any) => item.slipNo)
    )) as any
    if (res.code === 200) {
      ElMessage({
        message: '检核成功',
        type: 'success'
      })
      getTableList()
    } else {
      JMessage.error(res.message)
    }
  }
  if (content === '打勾记录取消检核') {
    const res = (await LoginWork.put(
      `/mtlCosts/allApAmt/cfm?cfmFlag=null`,
      selectedLists.value.map((item: any) => item.slipNo)
    )) as any
    if (res.code === 200) {
      ElMessage({
        message: '取消检核成功',
        type: 'success'
      })
      getTableList()
    } else {
      JMessage.error(res.message)
    }
  }
  if (content === '取消结算') {
    const res = (await LoginWork.post(`/mtlCosts/allApAmt/tempDel?slipNo=${currentTableRow.value.slipNo}`)) as any
    if (res.code === 200) {
      ElMessage({
        message: '取消结算成功',
        type: 'success'
      })
      getTableList()
    } else {
      JMessage.error(res.message)
    }
  }
  if (content === '导出') {
    const res = (await fileRequest.post(`/mtlCosts/allApAmt/detailQuery/export?slipNo=${currentTableRow.value.slipNo}`)) as any
    const link = document.createElement('a') // 利用a标签自定义下载文件名
    let blob = new Blob([res.data]) // 创建Blob对象，设置文件类型
    link.style.display = 'none'
    //设置连接
    link.href = window.URL.createObjectURL(blob)
    const FileName = decodeURI(res.headers['content-disposition'].split(`filename=`)[1])
    link.download = FileName //自定义文件名字
    document.body.appendChild(link)
    //模拟点击事件
    link.click()
    document.body.removeChild(link)
  }
  if (content === '导出汇总') {
    const res = (await fileRequest.post(`/mtlCosts/allApAmt/detailQuery/aggrExport?slipNo=${currentTableRow.value.slipNo}`)) as any
    const link = document.createElement('a') // 利用a标签自定义下载文件名
    let blob = new Blob([res.data]) // 创建Blob对象，设置文件类型
    link.style.display = 'none'
    //设置连接
    link.href = window.URL.createObjectURL(blob)
    const FileName = decodeURI(res.headers['content-disposition'].split(`filename=`)[1])
    link.download = FileName //自定义文件名字
    document.body.appendChild(link)
    //模拟点击事件
    link.click()
    document.body.removeChild(link)
  }
  if (content === '打印') {
    if (currentTableRow.value.cfmFlag !== 'Y') {
      JMessage.warning('该单据未检核，无法打印')
      return
    }

    await pages()

    setTimeout(() => {
      printSummary()
    }, 1000)
  }
}

// 表一模块
const tableHeader = ref([
  {
    width: '120px',
    backgroundColor: true,
    label: '单据号码',
    prop: 'slipNo'
  },
  {
    label: '结算日期',
    prop: 'slipDate'
  },
  {
    label: '厂商名称',
    prop: 'vendorName'
  },
  {
    label: '结算月份',
    prop: 'financeYymm'
  },
  {
    label: '结算方式',
    prop: 'accountName'
  },
  {
    backgroundColor2: true,
    label: '金额',
    prop: 'amt'
  }
])
const tableData = ref([])
const isLoading = ref(true)
// 总计
interface summaryDataType {
  index: number
  num: number | undefined
}
const summaryData = ref<summaryDataType[]>([
  {
    index: 6,
    num: 0
  }
])
// 分页器
const currentPage = ref(1)
const pageSize = ref(40)
const total = ref(0)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableList()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getTableList()
}
// 表格计算函数
const cfmFlag = () => {
  const Unaudited = formList.value.find((item: any) => item.type === 'checkbox' && i18n.global.t(item.checkboxLabel) === '未检核')
  const Audited = formList.value.find((item: any) => item.type === 'checkbox' && i18n.global.t(item.checkboxLabel) === '已检核')
  if (!Unaudited || !Audited) return
  if (Unaudited.checked && Audited.checked) {
    return ''
  } else if (Unaudited.checked) {
    return 0
  } else if (Audited.checked) {
    return 1
  } else {
    ElMessage('必须至少选择一项')
    Unaudited.checked = true
    Audited.checked = true
    return ''
  }
}
const cfmFlag2 = () => {
  const Unaudited = formList.value.find((item: any) => item.type === 'checkbox' && i18n.global.t(item.checkboxLabel) === '未付')
  const Audited = formList.value.find((item: any) => item.type === 'checkbox' && i18n.global.t(item.checkboxLabel) === '已付')
  if (!Unaudited || !Audited) return
  if (Unaudited.checked && Audited.checked) {
    return ''
  } else if (Unaudited.checked) {
    return 0
  } else if (Audited.checked) {
    return 1
  } else {
    ElMessage('必须至少选择一项')
    Unaudited.checked = true
    Audited.checked = true
    return ''
  }
}
// 获取表数据
const getTableList = debounce(async () => {
  isLoading.value = true
  let tableDataList = await service.post<any, any>('/mtlCosts/allApAmt/tempQuery', {
    financeYymm: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '结算月份'
    )?.inputValue,
    lotNo: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '指令'
    )?.inputValue,
    mtlName: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '材料名称'
    )?.inputValue,
    slipDateEnd: formList.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '结算日期'
    )?.dateValue?.[1],
    slipDateStart: formList.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '结算日期'
    )?.dateValue?.[0],
    slipNo: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '单据号码'
    )?.inputValue,
    vendorName: formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '厂商')
      ?.selectValue,
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    accountName: formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '结算方式')
      ?.selectValue,
    cfmFlag: cfmFlag(), //	有无欠数(Y/N)	string	body	true
    fkFlag: cfmFlag2()
  })
  isLoading.value = false
  tableData.value = tableDataList.dtos.map((item: any) => {
    if (item.cfmFlag === 'Y') item.backgroundColor = '#40E080'
    if (item.fkFlag === '1') item.backgroundColor2 = '#40E080'
    if (item.fkFlag === '-1') item.backgroundColor2 = '#FDF3AA'
    return item
  })
  total.value = tableDataList.total
  currentRow()
  summaryData.value[0].num = tableDataList.amtSum
}, 500)
onMounted(() => {
  getTableList()
})
watch(
  () =>
    formList.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList()
  }
)
// 点击表给另一张表传数据
const currentTableRow = ref({}) as any
const currentRow = async (row: any = tableData.value[0] ? tableData.value[0] : {}) => {
  currentTableRow.value = row
  await getTableList2()
  getTableList3()
}
const selectedLists = ref([])
const selectTableList = (selectedList: any) => {
  selectedLists.value = selectedList
}
const settlementBtn = async () => {
  if (!month.value || !vender.value) {
    JMessage.warning('请先选择月份和厂商')
    return
  }
  const res = (await LoginWork.put(
    `/mtlCosts/allApAmt/tempAdd?financeYymm=${month.value}&vendorName=${vender.value}&accountName=${settlementMethod.value}`
  )) as any
  if (res.code === 200) {
    JMessage.success('结算成功')
    getTableList()
  } else {
    JMessage.error(res.message)
  }
}

// 表二模块
const tableData2 = ref([]) as any
const isLoading2 = ref(true)
// 总计
interface summaryDataType {
  index: number
  num: number | undefined
}
const summaryData2 = ref<summaryDataType[]>([
  {
    index: 5,
    num: 0
  },
  {
    index: 7,
    num: 0
  }
]) as any
// 分页器
const currentPage2 = ref(1)
const pageSize2 = ref(40)
const total2 = ref(0)
const handleSizeChange2 = (val: number) => {
  pageSize2.value = val
  getTableList2()
}
const handleCurrentChange2 = (val: number) => {
  currentPage2.value = val
  getTableList2()
}
// 获取表数据
const getTableList2 = debounce(async () => {
  isLoading2.value = true
  let tableDataList = await service.post<any, any>(`/mtlCosts/allApAmt/detailQuery?slipNo=${currentTableRow.value.slipNo}`, {
    pageNum: 1,
    pageSize: 999999
  })
  isLoading2.value = false
  tableData2.value = tableDataList.dtos
  total2.value = tableDataList.total
  currentRow2()
  summaryData2.value[0].num = tableDataList.qtySum
  summaryData2.value[1].num = tableDataList.amtSum
}, 300)

// 每页显示的行数
let rowsPerPage = 0
// 计算总页数
const totalPages = ref(0)
const isLastPage = (pageIndex: number, totalPages: number) => {
  return pageIndex === totalPages - 1
}
// 分割数据为多页
const pages = async () => {
  printArr.value = []
  let RowList = [] as any // 分成一行打印
  let DBRowList = [] as any // 分成两行打印
  let ThRowList = [] as any // 分成三行打印
  let tableDataList = await service.post<any, any>(`/mtlCosts/allApAmt/detailQuery?slipNo=${currentTableRow.value.slipNo}&flag=${1}`, {
    pageNum: 1,
    pageSize: 999999
  })
  tableDataList.dtos.map((item: any) => {
    let string = ''
    item.rowsPerPage = 17
    for (const key in item) {
      if (
        key === 'mtlColor' ||
        key === 'mtlName' ||
        key === 'mtlSpec' ||
        key === 'mtlUnit' ||
        key === 'qty' ||
        key === 'price' ||
        key === 'amt' ||
        key === 'remark'
      ) {
        string = string + item[key]
      }
    }
    if (item.remark === null) item.remark = ''
    if (string.length <= 62 && item.remark.length <= 3) {
      RowList.push(item)
    } else if (string.length > 62 && string.length < 91 && item.remark.length <= 3) {
      DBRowList.push(item)
    } else if (string.length >= 91 && item.remark.length <= 3) {
      ThRowList.push(item)
    } else if (string.length <= 62 && item.remark.length > 3 && item.remark.length <= 14) {
      RowList.push(item)
    } else if (string.length > 62 && string.length < 91 && item.remark.length > 3 && item.remark.length <= 14) {
      DBRowList.push(item)
    } else if (string.length >= 91 && item.remark.length > 3 && item.remark.length <= 14) {
      ThRowList.push(item)
    } else if (string.length > 62 && string.length < 91 && item.remark.length > 14) {
      DBRowList.push(item)
    } else if (string.length >= 91 && item.remark.length > 14) {
      ThRowList.push(item)
    } else {
      DBRowList.push(item)
    }
    return item
  })
  rowsPerPage = 17
  console.log(RowList, DBRowList, ThRowList)
  if (tableDataList.dtos.length <= 7) {
    printArr.value.push(tableDataList.dtos)
    totalPages.value = printArr.value.length
    return
  }

  if (RowList.length > 17 && RowList.length <= 34) {
    printArr.value.push(RowList.slice(0, 17))
    printArr.value.push(RowList.slice(17, 34))
  } else if (RowList.length > 34 && RowList.length <= 51) {
    printArr.value.push(RowList.slice(0, 17))
    printArr.value.push(RowList.slice(17, 34))
    printArr.value.push(RowList.slice(34, 51))
  } else if (RowList.length > 51 && RowList.length <= 68) {
    printArr.value.push(RowList.slice(0, 17))
    printArr.value.push(RowList.slice(17, 34))
    printArr.value.push(RowList.slice(34, 51))
    printArr.value.push(RowList.slice(51, 68))
  } else if (RowList.length > 68 && RowList.length <= 85) {
    printArr.value.push(RowList.slice(0, 17))
    printArr.value.push(RowList.slice(17, 34))
    printArr.value.push(RowList.slice(34, 51))
    printArr.value.push(RowList.slice(51, 68))
    printArr.value.push(RowList.slice(68, 85))
  } else if (RowList.length > 85 && RowList.length <= 102) {
    printArr.value.push(RowList.slice(0, 17))
    printArr.value.push(RowList.slice(17, 34))
    printArr.value.push(RowList.slice(34, 51))
    printArr.value.push(RowList.slice(51, 68))
    printArr.value.push(RowList.slice(68, 85))
    printArr.value.push(RowList.slice(85, 102))
  } else if (RowList.length > 102 && RowList.length <= 119) {
    printArr.value.push(RowList.slice(0, 17))
    printArr.value.push(RowList.slice(17, 34))
    printArr.value.push(RowList.slice(34, 51))
    printArr.value.push(RowList.slice(51, 68))
    printArr.value.push(RowList.slice(68, 85))
    printArr.value.push(RowList.slice(85, 102))
    printArr.value.push(RowList.slice(102, 119))
  } else if (RowList.length > 119 && RowList.length <= 136) {
    printArr.value.push(RowList.slice(0, 17))
    printArr.value.push(RowList.slice(17, 34))
    printArr.value.push(RowList.slice(34, 51))
    printArr.value.push(RowList.slice(51, 68))
    printArr.value.push(RowList.slice(68, 85))
    printArr.value.push(RowList.slice(85, 102))
    printArr.value.push(RowList.slice(102, 119))
    printArr.value.push(RowList.slice(119, 136))
  } else if (RowList.length > 136 && RowList.length <= 153) {
    printArr.value.push(RowList.slice(0, 17))
    printArr.value.push(RowList.slice(17, 34))
    printArr.value.push(RowList.slice(34, 51))
    printArr.value.push(RowList.slice(51, 68))
    printArr.value.push(RowList.slice(68, 85))
    printArr.value.push(RowList.slice(85, 102))
    printArr.value.push(RowList.slice(102, 119))
    printArr.value.push(RowList.slice(119, 136))
    printArr.value.push(RowList.slice(136, 153))
  } else if (RowList.length > 153 && RowList.length <= 170) {
    printArr.value.push(RowList.slice(0, 17))
    printArr.value.push(RowList.slice(17, 34))
    printArr.value.push(RowList.slice(34, 51))
    printArr.value.push(RowList.slice(51, 68))
    printArr.value.push(RowList.slice(68, 85))
    printArr.value.push(RowList.slice(85, 102))
    printArr.value.push(RowList.slice(102, 119))
    printArr.value.push(RowList.slice(119, 136))
    printArr.value.push(RowList.slice(136, 153))
    printArr.value.push(RowList.slice(153, 170))
  } else if (RowList.length > 170) {
    printArr.value.push(RowList.slice(0, 17))
    printArr.value.push(RowList.slice(17, 34))
    printArr.value.push(RowList.slice(34, 51))
    printArr.value.push(RowList.slice(51, 68))
    printArr.value.push(RowList.slice(68, 85))
    printArr.value.push(RowList.slice(85, 102))
    printArr.value.push(RowList.slice(102, 119))
    printArr.value.push(RowList.slice(119, 136))
    printArr.value.push(RowList.slice(136, 153))
    printArr.value.push(RowList.slice(153, 170))
    printArr.value.push(RowList.slice(170, 187))
    printArr.value.push(RowList.slice(187))
  } else if (RowList.length > 0 && RowList.length <= 17) {
    printArr.value.push(RowList)
  }
  // 如果两行和三行没超过一页，放到一起
  if (DBRowList.length + ThRowList.length < 5 && DBRowList.length + ThRowList.length > 0) {
    printArr.value.push(DBRowList.concat(ThRowList))
    totalPages.value = printArr.value.length
    return
  }

  // 如果一行取余数和两行没超过一页，把一行最后一页和两行放到一起
  if (RowList.length % 17 <= 3 && DBRowList.length < 4 && DBRowList.length > 0) {
    DBRowList.forEach((item: any) => {
      printArr.value[printArr.value.length - 1].push(item)
    })
    DBRowList = []
    console.log(printArr.value[printArr.value.length - 1])
  }

  if (DBRowList.length > 11 && DBRowList.length <= 22) {
    printArr.value.push(DBRowList.slice(0, 8))
    printArr.value.push(DBRowList.slice(8, 15))
    printArr.value.push(DBRowList.slice(15))
  }
  // if (DBRowList.length > 17 && DBRowList.length <= 22) {
  //   printArr.value.push(DBRowList.slice(0, 8))
  //   printArr.value.push(DBRowList.slice(8, 16))
  //   printArr.value.push(DBRowList.slice(16))
  // }
  else if (DBRowList.length > 22 && DBRowList.length <= 33) {
    printArr.value.push(DBRowList.slice(0, 11))
    printArr.value.push(DBRowList.slice(11, 22))
    printArr.value.push(DBRowList.slice(22))
  } else if (DBRowList.length > 33 && DBRowList.length <= 44) {
    printArr.value.push(DBRowList.slice(0, 11))
    printArr.value.push(DBRowList.slice(11, 22))
    printArr.value.push(DBRowList.slice(22, 33))
    printArr.value.push(DBRowList.slice(33))
  } else if (DBRowList.length > 44 && DBRowList.length <= 55) {
    printArr.value.push(DBRowList.slice(0, 11))
    printArr.value.push(DBRowList.slice(11, 22))
    printArr.value.push(DBRowList.slice(22, 33))
    printArr.value.push(DBRowList.slice(33, 44))
    printArr.value.push(DBRowList.slice(44))
  } else if (DBRowList.length > 55 && DBRowList.length <= 66) {
    printArr.value.push(DBRowList.slice(0, 11))
    printArr.value.push(DBRowList.slice(11, 22))
    printArr.value.push(DBRowList.slice(22, 33))
    printArr.value.push(DBRowList.slice(33, 44))
    printArr.value.push(DBRowList.slice(44, 55))
    printArr.value.push(DBRowList.slice(55))
  } else if (DBRowList.length > 66 && DBRowList.length <= 77) {
    printArr.value.push(DBRowList.slice(0, 11))
    printArr.value.push(DBRowList.slice(11, 22))
    printArr.value.push(DBRowList.slice(22, 33))
    printArr.value.push(DBRowList.slice(33, 44))
    printArr.value.push(DBRowList.slice(44, 55))
    printArr.value.push(DBRowList.slice(55, 66))
    printArr.value.push(DBRowList.slice(66))
  } else if (DBRowList.length > 77 && DBRowList.length <= 88) {
    printArr.value.push(DBRowList.slice(0, 11))
    printArr.value.push(DBRowList.slice(11, 22))
    printArr.value.push(DBRowList.slice(22, 33))
    printArr.value.push(DBRowList.slice(33, 44))
    printArr.value.push(DBRowList.slice(44, 55))
    printArr.value.push(DBRowList.slice(55, 66))
    printArr.value.push(DBRowList.slice(66, 77))
    printArr.value.push(DBRowList.slice(77))
  } else if (DBRowList.length > 88 && DBRowList.length <= 99) {
    printArr.value.push(DBRowList.slice(0, 11))
    printArr.value.push(DBRowList.slice(11, 22))
    printArr.value.push(DBRowList.slice(22, 33))
    printArr.value.push(DBRowList.slice(33, 44))
    printArr.value.push(DBRowList.slice(44, 55))
    printArr.value.push(DBRowList.slice(55, 66))
    printArr.value.push(DBRowList.slice(66, 77))
    printArr.value.push(DBRowList.slice(77, 88))
    printArr.value.push(DBRowList.slice(88))
  } else if (DBRowList.length > 99 && DBRowList.length <= 109) {
    printArr.value.push(DBRowList.slice(0, 11))
    printArr.value.push(DBRowList.slice(11, 22))
    printArr.value.push(DBRowList.slice(22, 33))
    printArr.value.push(DBRowList.slice(33, 44))
    printArr.value.push(DBRowList.slice(44, 55))
    printArr.value.push(DBRowList.slice(55, 66))
    printArr.value.push(DBRowList.slice(66, 77))
    printArr.value.push(DBRowList.slice(77, 88))
    printArr.value.push(DBRowList.slice(88, 99))
    printArr.value.push(DBRowList.slice(99))
  } else if (DBRowList.length > 109 && DBRowList.length <= 119) {
    printArr.value.push(DBRowList.slice(0, 11))
    printArr.value.push(DBRowList.slice(11, 22))
    printArr.value.push(DBRowList.slice(22, 33))
    printArr.value.push(DBRowList.slice(33, 44))
    printArr.value.push(DBRowList.slice(44, 55))
    printArr.value.push(DBRowList.slice(55, 66))
    printArr.value.push(DBRowList.slice(66, 77))
    printArr.value.push(DBRowList.slice(77, 88))
    printArr.value.push(DBRowList.slice(88, 99))
    printArr.value.push(DBRowList.slice(99, 109))
    printArr.value.push(DBRowList.slice(109))
  } else if (DBRowList.length > 119 && DBRowList.length <= 129) {
    printArr.value.push(DBRowList.slice(0, 11))
    printArr.value.push(DBRowList.slice(11, 22))
    printArr.value.push(DBRowList.slice(22, 33))
    printArr.value.push(DBRowList.slice(33, 44))
    printArr.value.push(DBRowList.slice(44, 55))
    printArr.value.push(DBRowList.slice(55, 66))
    printArr.value.push(DBRowList.slice(66, 77))
    printArr.value.push(DBRowList.slice(77, 88))
    printArr.value.push(DBRowList.slice(88, 99))
    printArr.value.push(DBRowList.slice(99, 109))
    printArr.value.push(DBRowList.slice(109, 119))
    printArr.value.push(DBRowList.slice(119))
  } else if (DBRowList.length > 129) {
    printArr.value.push(DBRowList.slice(0, 11))
    printArr.value.push(DBRowList.slice(11, 22))
    printArr.value.push(DBRowList.slice(22, 33))
    printArr.value.push(DBRowList.slice(33, 44))
    printArr.value.push(DBRowList.slice(44, 55))
    printArr.value.push(DBRowList.slice(55, 66))
    printArr.value.push(DBRowList.slice(66, 77))
    printArr.value.push(DBRowList.slice(77, 88))
    printArr.value.push(DBRowList.slice(88, 99))
    printArr.value.push(DBRowList.slice(99, 109))
    printArr.value.push(DBRowList.slice(109, 119))
    printArr.value.push(DBRowList.slice(119, 129))
    printArr.value.push(DBRowList.slice(129))
  } else if (DBRowList.length > 0 && DBRowList.length <= 11) {
    printArr.value.push(DBRowList)
  }

  // 取余的情况整理
  if (DBRowList.length > 0 && ThRowList.length > 0 && ThRowList.length <= 3 && DBRowList.length % 11 <= 2) {
    printArr.value[printArr.value.length - 1] = printArr.value[printArr.value.length - 1].concat(ThRowList)
    totalPages.value = printArr.value.length
    return
  }

  if (ThRowList.length > 4 && ThRowList.length <= 8) {
    printArr.value.push(ThRowList.slice(0, 4))
    printArr.value.push(ThRowList.slice(4))
  } else if (ThRowList.length > 8 && ThRowList.length <= 12) {
    printArr.value.push(ThRowList.slice(0, 4))
    printArr.value.push(ThRowList.slice(4, 8))
    printArr.value.push(ThRowList.slice(8))
  } else if (ThRowList.length > 12 && ThRowList.length <= 16) {
    printArr.value.push(ThRowList.slice(0, 4))
    printArr.value.push(ThRowList.slice(4, 8))
    printArr.value.push(ThRowList.slice(8, 12))
    printArr.value.push(ThRowList.slice(12))
  } else if (ThRowList.length > 16 && ThRowList.length <= 20) {
    printArr.value.push(ThRowList.slice(0, 4))
    printArr.value.push(ThRowList.slice(4, 8))
    printArr.value.push(ThRowList.slice(8, 12))
    printArr.value.push(ThRowList.slice(12, 16))
    printArr.value.push(ThRowList.slice(16))
  } else if (ThRowList.length > 20 && ThRowList.length <= 24) {
    printArr.value.push(ThRowList.slice(0, 4))
    printArr.value.push(ThRowList.slice(4, 8))
    printArr.value.push(ThRowList.slice(8, 12))
    printArr.value.push(ThRowList.slice(12, 16))
    printArr.value.push(ThRowList.slice(16, 20))
  } else if (ThRowList.length > 0 && ThRowList.length <= 4) {
    printArr.value.push(ThRowList)
  }

  // // 最后一页按照条件分页
  // if (printArr.value[printArr.value.length - 1].length > 8) {
  //   printArr.value.push(printArr.value[printArr.value.length - 1].slice(17))
  // }

  // 设置总页数
  totalPages.value = printArr.value.length
}

onMounted(() => {
  getTableList2()
})
watch(formList2.value, () => {
  getTableList2()
})
// 点击表给另一张表传数据
const currentTable2Row = ref({}) as any
const currentRow2 = async (row: any = tableData.value[0]) => {
  currentTable2Row.value = row
}
const tableHeader2 = ref([
  {
    label: '指令',
    prop: 'lotNo',
    width: '120'
  },
  {
    label: '材料颜色',
    prop: 'mtlColor'
  },
  {
    width: 250,
    label: '材料名称',
    prop: 'mtlName'
  },
  {
    label: '规格',
    prop: 'mtlSpec',
    width: '55'
  },
  {
    label: '单位',
    prop: 'mtlUnit',
    width: '55'
  },
  {
    label: '数量',
    prop: 'qty'
  },
  {
    label: '单价',
    prop: 'price'
  },
  {
    label: '金额',
    prop: 'amt'
  },
  {
    label: '备注',
    prop: 'remark'
  },
  {
    label: '仓管员',
    prop: 'sysUser'
  }
])

// 表三模块
const tableData3 = ref([])
const isLoading3 = ref(true)
// 总计
interface summaryDataType {
  index: number
  num: number | undefined
}
const summaryData3 = ref<summaryDataType[]>([
  {
    index: 3,
    num: 0
  }
])
// 分页器
const currentPage3 = ref(1)
const pageSize3 = ref(40)
const total3 = ref(0)
const handleSizeChange3 = (val: number) => {
  pageSize3.value = val
  getTableList3()
}
const handleCurrentChange3 = (val: number) => {
  currentPage3.value = val
  getTableList3()
}
// 获取表数据
const getTableList3 = debounce(async () => {
  isLoading3.value = true
  let tableDataList = await service.post<any, any>(`/mtlCosts/allApAmt/fkQuery?slipNo=${currentTableRow.value.slipNo}`)
  isLoading3.value = false
  tableData3.value = tableDataList.dtos
  total3.value = tableDataList.total
  summaryData3.value[0].num = tableDataList.amtSum
  currentRow3()
  if (summaryData2.value[1].num !== 0) unpaid.value = summaryData2.value[1].num - tableDataList.amtSum
}, 500)
const tableHeader3 = ref([
  {
    label: '单据号码',
    prop: 'slipNo'
  },
  {
    label: '厂商名称',
    prop: 'vendorName'
  },
  {
    label: '付款日期',
    prop: 'apCheckDate'
  },
  {
    label: '金额',
    prop: 'amt'
  },
  {
    label: '备注',
    prop: 'remark'
  },
  {
    label: '操作员',
    prop: 'sysUser'
  }
])
const JTableHeader3 = ref([
  {
    type: 'dateSingle2',
    label: '付款日期',
    prop: 'apCheckDate'
  },
  {
    label: '金额',
    prop: 'amt'
  },
  {
    label: '备注',
    prop: 'remark'
  }
])
const currentTableRow3 = ref({}) as any
const currentRow3 = async (row: any = tableData3.value[0]) => {
  currentTableRow3.value = row
}
// Dialog确认添加/修改按钮
const confirm3 = async (obj: any, dialogVisible: any, title: any) => {
  // 向服务器发送请求，更新外派单信息
  if (title === '添加') {
    if (Number(obj.amt) > summaryData2.value[1].num || Number(obj.amt) > unpaid.value) {
      JMessage.warning('金额不能大于未付金额')
      return
    }
    const res = (await LoginWork.post(`/mtlCosts/allApAmt/fkAdd`, {
      ...currentTableRow.value,
      ...obj
    })) as any
    // 判断请求是否成功
    if (res.code === 200) {
      JMessage.success(res.message)
      getTableList3()
    } else {
      JMessage.error(res.message)
    }
  } else if (title === '修改') {
    const res = (await LoginWork.put(
      `/mtlCosts/allApAmt/fkUp?amtOld=${currentTableRow3.value.amt}&vendorNameOld=${currentTableRow3.value.vendorName}`,
      {
        ...obj,
        ...currentTableRow.value
      }
    )) as any
    // 判断请求是否成功
    if (res.code === 200) {
      JMessage.success(res.message)
      getTableList3()
    } else {
      JMessage.error(res.message)
    }
  }
  // 关闭弹出框
  dialogVisible.value = false
}
// 删除
const removeOne3 = async () => {
  // 向服务器发送请求，更新外派单信息
  const res = (await LoginWork.post(`/mtlCosts/allApAmt/fkDel?id=${currentTableRow3.value.id}`)) as any
  // 判断请求是否成功
  if (res.code === 200) {
    JMessage.success('删除成功')
  } else {
    JMessage.error(res.message)
  }
  // 重新获取表格数据
  getTableList3()
}
const unpaid = ref(0)
// 尾款处理按钮
const finalPaymentBtn = async () => {
  if (selectedLists.value.length === 0) {
    JMessage.error('请先勾选数据')
    return
  }
  const res = (await LoginWork.put(
    '/mtlCosts/allApAmt/aftPayProcess',
    selectedLists.value.map((item: any) => item.slipNo)
  )) as any
  if (res.code === 200) {
    JMessage.success('尾款处理成功')
    getTableList3()
  } else {
    JMessage.error(res.message)
  }
}

const selectList = async () => {
  let vendorName = await service.get<any, any>('/back/vendorQuery')
  // 插入厂商代码 厂商名称
  vendorName.forEach((item: any, index: any) => {
    if (item === null) return
    formList.value
      .find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '厂商')
      ?.selectOptions?.push({
        optionKey: `${item.vendorName}`,
        optionLabel: `${item.vendorName}`,
        optionValue: `${item.vendorName}`
      })
    VenderOptions.value.push({
      value: `${item.vendorName}`,
      label: `${item.vendorName}`
    })
  })
  formList.value
    .find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '结算方式')
    ?.selectOptions?.push(
      {
        optionKey: `荣阳大货`,
        optionLabel: `荣阳大货`,
        optionValue: `荣阳大货`
      },
      {
        optionKey: `荣信`,
        optionLabel: `荣信`,
        optionValue: `荣信`
      },
      {
        optionKey: `KINGLIKE`,
        optionLabel: `KINGLIKE`,
        optionValue: `KINGLIKE`
      }
    )
  SettlementMethodOptions.value.push(
    {
      label: `荣阳大货`,
      value: `荣阳大货`
    },
    {
      label: `荣信`,
      value: `荣信`
    },
    {
      label: `KINGLIKE`,
      value: `KINGLIKE`
    }
  )
}
onMounted(() => {
  selectList()
})

// 结算资料导出
const outExcel = async () => {
  const res = (await fileRequest.post(`/mtlCosts/allApAmt/tempQuery/export`, {
    financeYymm: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '结算月份'
    )?.inputValue,
    lotNo: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '指令'
    )?.inputValue,
    mtlName: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '材料名称'
    )?.inputValue,
    slipDateEnd: formList.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '结算日期'
    )?.dateValue?.[1],
    slipDateStart: formList.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '结算日期'
    )?.dateValue?.[0],
    slipNo: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '单据号码'
    )?.inputValue,
    vendorName: formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '厂商')
      ?.selectValue,
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    accountName: formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '结算方式')
      ?.selectValue,
    cfmFlag: cfmFlag(), //	有无欠数(Y/N)	string	body	true
    fkFlag: cfmFlag2()
  })) as any
  const link = document.createElement('a') // 利用a标签自定义下载文件名
  let blob = new Blob([res.data]) // 创建Blob对象，设置文件类型
  link.style.display = 'none'
  //设置连接
  link.href = window.URL.createObjectURL(blob)
  const FileName = decodeURI(res.headers['content-disposition'].split(`filename=`)[1])
  link.download = FileName //自定义文件名字
  document.body.appendChild(link)
  //模拟点击事件
  link.click()
  document.body.removeChild(link)
}

// 打印汇总表
function transformStr(money: any) {
  var cnMoney = '零元整'
  var strOutput = ''
  var strUnit = '仟佰拾亿仟佰拾万仟佰拾元角分'
  money += '00'
  var intPos = money.indexOf('.')
  if (intPos >= 0) {
    money = money.substring(0, intPos) + money.substr(intPos + 1, 2)
  }
  strUnit = strUnit.substr(strUnit.length - money.length)
  for (var i = 0; i < money.length; i++) {
    strOutput += '零壹贰叁肆伍陆柒捌玖'.substr(money.substr(i, 1), 1) + strUnit.substr(i, 1)
  }
  cnMoney = strOutput
    .replace(/零角零分$/, '整')
    .replace(/零[仟佰拾]/g, '零')
    .replace(/零{2,}/g, '零')
    .replace(/零([亿|万])/g, '$1')
    .replace(/零+元/, '元')
    .replace(/亿零{0,3}万/, '亿')
    .replace(/^元/, '零元')
  return cnMoney
}
const getCurrentTime = () => {
  const date = new Date()
  const year = date!.getFullYear()
  const month = String(date!.getMonth() + 1).padStart(2, '0') // 使用padStart确保月份是两位数
  const day = String(date!.getDate()).padStart(2, '0') // 使用padStart确保日期是两位数
  const hours = String(date!.getHours()).padStart(2, '0') // 小时
  const minutes = String(date!.getMinutes()).padStart(2, '0') // 分钟
  const seconds = String(date!.getSeconds()).padStart(2, '0') // 秒
  // 返回格式化的日期时间字符串
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

const printArr = ref([]) as any
const count = ref(0)
const printSummary = async () => {
  const res = (await service.get(`/mtlCosts/allApAmt/detail/print?slipNo=${currentTableRow.value.slipNo}`)) as any
  await loadPrintTimes(currentTableRow.value.slipNo)
  await savePrintTimes(currentTableRow.value.slipNo)
  count.value = res.printCount
  currentTableRow.value.sum = res.slipCount
  // printArr.value = arr
  setTimeout(() => {
    const qrCodeContainer = document.querySelector<any>('.printContent2')
    if (qrCodeContainer) {
      qrCodeContainer.style.display = 'block'
      const printWindow = window.open('', '_blank')
      printWindow!.document.write(`
      <!DOCTYPE html>
      <html>
        <head>
          <title>&nbsp;</title>
          <link rel="stylesheet" type="text/css" href="print.css" media="print">
          <style>
            body, html {
              margin: 0;
              padding: 0;
            }
            @page {
              size: auto;
            }
            @media print {
                /* 打印时的样式 */


                /* 其他打印样式 */
            }
            h2 {
                    margin-left: initial; /* 或者设置适合打印的左边距 */
                    page-break-inside: avoid; /* 避免在h2元素内部分页 */
                }
            .headerTable {
                height: auto;
                border: 0px solid #000;
                text-align: center;
                display: flex;
                margin: 20px 20px 0px;
                vertical-align: top;
            }

            .title {
                display: flex;
                justify-content: center;
                margin-bottom: 10px;
            }

            .center {
                text-align: center;
            }

            .right {
                text-align: right;
            }

            .left {
                text-align: left;
            }

            .no-padding {
                padding: 0;
            }

            .no-margin {
                margin: 0;
            }

            .margin-5 {
                margin: 5px;
            }

            .margin-top-5 {
                margin-top: 5px;
            }

            .margin-top-15 {
                margin-top: 15px;
            }

            .size-8 {
                font-size: 8px !important;
            }

            .size-10 {
                font-size: 10px;
            }

            .size-12 {
                font-size: 12px;
            }

            .size-14 {
                font-size: 14px;
            }

            .size-16 {
                font-size: 17px;
            }

            .size-18 {
                font-size: 18px;
            }

            .size-24 {
                font-size: 24px;
            }

            #date-tip {
                position: relative;
            }

            span.tip {
                display: inline-block;
                height: 14px;
                line-height: 14px;
                margin-right: 30px;
            }

            table {
                font-size: 10px;
                border-collapse: collapse;
                border-spacing: 0;
                border-collapse: collapse;
                border-spacing: 0;
                empty-cells: show;
                width: 100%;
            }

            table th,
            table td {
                border: 1px solid #000;
                font-size: 12px;
            }

            table.no-border,
            table.no-border th,
            table.no-border td {
                border: 0px;
            }

            table td.no-left-border {
                border-left: 0px;
            }

            table td.no-right-border {
                border-right: 0px;
            }

            .mainTable {
                margin: 0 20px;
            }

            /* 可以在这里添加更多自定义的打印样式 */
          </style>
        </head>
        <body>
    `)

      // 将 .qrCodeContainer 的内容复制到打印窗口的 body 中
      const cloneContainer = qrCodeContainer.cloneNode(true)
      printWindow!.document.body.appendChild(cloneContainer)

      printWindow!.document.write(`
        </body>
      </html>
    `)
      printWindow!.document.close()

      // 开始打印
      printWindow!.print()

      // 打印完成后，可以恢复 .qrCodeContainer 的原始显示状态
      qrCodeContainer.style.display = 'none'
    }
  }, 600)
}
//打印次数记录
let printTimes = ref(0) as any
const localPrintTimes = ref<string | null>('0') as any
const savePrintTimes = async (k: any) => {
  const V: number = Number(localPrintTimes.value) + 1
  if (k !== null) localStorage.setItem(k, V.toString())
  printTimes.value = V
}
const loadPrintTimes = async (k: any) => {
  if (localStorage.getItem(k)) {
    localPrintTimes.value = localStorage.getItem(k)
  }
}
</script>

<style lang="less" scoped>
.printContent2 {
  display: none;
}

:deep(.el-table__body tr.current-row > td) {
  color: black;
}

:deep(.el-table__row tr.current-row > td) {
  background-color: #ffe080 !important;
  color: black;
}

:deep(.el-table .el-table__cell) {
  padding: 0;
}

:deep(.el-table__body tr:first-child) {
  background-color: white;
  color: black;
}

.JSelect {
  width: 150px;
}

/* 打印 */
.pad3 {
  padding: 3px;
}

.main {
  display: flex;
  justify-content: center;
}

.left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.headerTable {
  height: auto;
  border: 0px solid #000;
  text-align: center;
  display: flex;
  margin: 20px 20px 0px;
  vertical-align: top;
}

.title {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.left {
  text-align: left;
}

.no-padding {
  padding: 0;
}

.no-margin {
  margin: 0;
}

.margin-5 {
  margin: 5px;
}

.margin-top-5 {
  margin-top: 5px;
}

.margin-top-15 {
  margin-top: 15px;
}

.size-8 {
  font-size: 8px !important;
}

.size-10 {
  font-size: 10px;
}

.size-12 {
  font-size: 12px;
}

.size-14 {
  font-size: 15px;
}

.size-16 {
  font-size: 17px;
}

.size-18 {
  font-size: 18px;
}

.size-24 {
  font-size: 24px;
}

#date-tip {
  position: relative;
}

span.tip {
  display: inline-block;
  height: 14px;
  line-height: 14px;
  margin-right: 30px;
}

table {
  font-size: 10px;
  border-collapse: collapse;
  border-spacing: 0;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  width: 100%;
}

table th,
table td {
  border: 1px solid #000;
  font-size: 12px;
}

table.no-border,
table.no-border th,
table.no-border td {
  border: 0px;
}

table td.no-left-border {
  border-left: 0px;
}

table td.no-right-border {
  border-right: 0px;
}

.mainTable {
  margin: 0 20px;
}
.select {
  width: 780px;
}

table {
  table-layout: auto !important;
}

:deep(.el-table__header) {
  width: 100% !important;
}

:deep(.el-table__body) {
  width: 100% !important;
}
</style>
